Vue3 Hook示例

import { debounce, throttle } from "lodash-es";

type CallbackFunction = (...args: any[]) => void;

/**
 * 防抖，在短时间内连续触发的事件，确保只有最后一次操作被执行
 * @param callback
 * @param delay 间隔
 * @returns
 */
export function useDebounce(
  callback: CallbackFunction,
  delay: number = 1000
): CallbackFunction {
  const debouncedCallback = debounce(callback, delay);

  // 组件卸载时取消防抖回调
  onUnmounted(() => {
    debouncedCallback.cancel();
  });

  return debouncedCallback;
}

/**
 * 节流，在指定时间内，事件处理函数最多只执行一次
 * @param callback
 * @param delay 间隔
 * @returns
 */
export function useThrottle(
  callback: CallbackFunction,
  delay: number = 1000
): CallbackFunction {
  const throttleCallback = throttle(callback, delay, {
    // 最后不执行
    trailing: false,
  });

  // 组件卸载时取消节流回调
  onUnmounted(() => {
    throttleCallback.cancel();
  });

  return throttleCallback;
}

// 使用
import { useThrottle, useDebounce } from "@/hooks/useDebounceThrottle";

// 防抖
const goDebounce = useDebounce(() => {
  console.log("goDebounce===>");
}, 2000);

// 节流
const goThrottle = useThrottle(() => {
  console.log("goThrottle===>");
}, 2000);